<template>
    <div class="styleKit-styleKitCommon">
        <pre>
            <code class="JavaScript" v-text="jsCode">
            </code>
        </pre>

        <!-- 显示HTML代码 -->
        <pre>
            <code class="css" v-text="cssCode">
            </code>
        </pre>

        <pre>
            <code class="css" v-text="padddingCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：5px 10px 15px 20px 25px 30px;</div>
            <div>使用方式：zlst-padding-top-5px</div>
        </div>

        <pre>
            <code class="css" v-text="marginCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：5px 10px 15px 20px 25px 30px;</div>
            <div>使用方式：zlst-margin-top-5px</div>
        </div>

        <pre>
            <code class="css" v-text="lineHeightCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：20px 25px 30px 35px;</div>
            <div>使用方式：zlst-line-height-20px</div>
        </div>

        <pre>
            <code class="css" v-text="borderRadiusCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：4px 8px 12px 22px 36px;</div>
            <div>使用方式：zlst-border-radius-4px</div>
        </div>

        <pre>
            <code class="css" v-text="heightCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：22px 26px 28px 32px 36px;</div>
            <div>使用方式：zlst-height-22px</div>
        </div>

        <pre>
            <code class="css" v-text="widthCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：22px 25px 28px 32px 36px;</div>
            <div>使用方式：zlst-width-22px</div>
        </div>

        <pre>
            <code class="css" v-text="opacityCss">
            </code>
        </pre>
        <div class="remark-code">
            <div>$num 数据有如下内容：0 25 40 60 80 90;</div>
            <div>使用方式：zlst-opacity-25</div>
        </div>

        <ul class="up-down-list">
            <li v-for="(item, index) in totalData" :key="index">
                <span class="left">
                    <b>{{ item.alias }}</b>
                </span>
                <span class="right">{{ item.comment }}</span>
            </li>
        </ul>


    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        data: function () {
            return {
                formItemWidthData: [
                    {
                        alias: '.ivu-form-item-width-3xs',
                        comment: '60px'
                    },
                    {
                        alias: '.ivu-form-item-width-2xs',
                        comment: '90px'
                    },
                    {
                        alias: '.ivu-form-item-width-xs',
                        comment: '130px'
                    },
                    {
                        alias: '.ivu-form-item-width-s',
                        comment: '200px'
                    },
                    {
                        alias: '.ivu-form-item-width',
                        comment: '275px'
                    },
                    {
                        alias: '.ivu-form-item-width-l',
                        comment: '420px'
                    },
                    {
                        alias: '.ivu-form-item-width-xl',
                        comment: '565px'
                    },
                    {
                        alias: '.ivu-form-item-width-2xl',
                        comment: '725px'
                    }
                ],
                otherData: [
                    {
                        alias: '.clearfix',
                        comment: '清除浮动'
                    }
                ],
                marginData:[

                ],

                // 引入
                jsCode:'' +
                '<div class="clearfix">\n' +
                '  ...\n' +
                '  <Input placeholder="请输入..." class="ivu-form-item-width"></Input>\n' +
                '  ...\n' +
                '</div>',


                // 常用的样式
                cssCode:'' +
                '// 一行显示省略号\n' +
                '.one-line-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}\n' +
                '\n' +
                '// 图片自适应-响应式\n' +
                '.img_responsive {display: block;max-width: 100%;height: auto;}\n' +
                '\n' +
                '// position 定位类型\n' +
                '.zlst-relative{position: relative;}\n' +
                '.zlst-absolute{position: absolute;}\n' +
                '.zlst-fixed{position: fixed;}\n' +
                '\n' +
                '// 鼠标显示手指\n' +
                '.zlst-pointer{cursor:pointer}\n' +
                '\n' +
                '//浮动\n' +
                '.zlst-float-left{float:left;}\n' +
                '.zlst-float-right{float:right;}\n' +
                '\n' +
                '.zlst-overflow-hidden{overflow: hidden;}\n' +
                '.zlst-visibility-hidden{visibility:hidden;}\n' +
                '.zlst-visibility-visible {visibility:visible;}\n' +
                '\n' +
                '// display 显示类型\n' +
                '.zlst-display-none-important{display: none !important;}\n' +
                '.zlst-display-none{display: none;}\n' +
                '.zlst-display-block-important{display: block !important;}\n' +
                '.zlst-display-block{display: block;}\n' +
                '.zlst-display-inline-block-important{display: inline-block !important;}\n' +
                '.zlst-display-inline-block{display: inline-block;}\n' +
                '.zlst-display-inline-important{display: inline !important;}\n' +
                '.zlst-display-inline{display: inline;}',


                padddingCss:'' +
                '.zlst-padding-top-#{$num} {\n' +
                '\tpadding-top: #{$num};\n' +
                '}\n' +
                '.zlst-padding-right-#{$num} {\n' +
                '\tpadding-right: #{$num};\n' +
                '}\n' +
                '.zlst-padding-bottom-#{$num} {\n' +
                '\tpadding-bottom: #{$num};\n' +
                '}\n' +
                '.padding-left-#{$num} {\n' +
                '\tpadding-left: #{$num};\n' +
                '}\n' +
                '.zlst-padding-#{$num} {\n' +
                '\tpadding: #{$num};\n' +
                '}',

                marginCss:'' +
                '.zlst-margin-top-#{$num} {\n' +
                '\tmargin-top: #{$num};\n' +
                '}\n' +
                '.zlst-margin-right-#{$num} {\n' +
                '\tmargin-right: #{$num};\n' +
                '}\n' +
                '.zlst-margin-bottom-#{$num} {\n' +
                '\tmargin-bottom: #{$num};\n' +
                '}\n' +
                '.zlst-margin-left-#{$num} {\n' +
                '\tmargin-left: #{$num};\n' +
                '}\n' +
                '.zlst-margin-#{$num} {\n' +
                '\tmargin: #{$num};\n' +
                '}',


                postionCss:'' +
                '.zlst-position-top-#{$num} {\n' +
                '\ttop: #{$num};\n' +
                '}\n' +
                '.zlst-position-right-#{$num} {\n' +
                '\tright: #{$num};\n' +
                '}\n' +
                '.zlst-position-bottom-#{$num} {\n' +
                '\tbottom: #{$num};\n' +
                '}\n' +
                '.zlst-position-left-#{$num} {\n' +
                '\tleft: #{$num};\n' +
                '}',

                lineHeightCss:'' +
                '.zlst-line-height-#{$num}{\n' +
                '\theight:  #{$num};\n' +
                '\tline-height:  #{$num};\n' +
                '}',

                borderRadiusCss:'' +
                '.zlst-border-radius-#{$num}{\n' +
                '\tborder-radius: #{$num};\n' +
                '}\n',

                heightCss:'' +
                '.zlst-height-#{$num}{\n' +
                '\theight: #{$num};\n' +
                '}',

                widthCss:'' +
                '.zlst-width-#{$num}{\n' +
                '\twidth: #{$num};\n' +
                '}\n',

                opacityCss:'' +
                '.zlst-opacity-#{$num}{\n' +
                '\tfilter: alpha(opacity=#{$num});\n' +
                '\t-moz-opacity: #{$num/100};\n' +
                '\t-khtml-opacity: #{$num/100};\n' +
                '\topacity: #{$num/100};\n' +
                '}',

            }
        },
        computed: {
            totalData: function () {
                return []
                    .concat(this.formItemWidthData)
                    .concat(this.otherData)
                    .concat(this.marginData)
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.styleKit-styleKitCommon pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 10);
        }
    }
</script>

<style lang="scss">
    @import 'styleKit.scss';
    .styleKit-styleKitCommon{
        .remark-code{
            color:$color-font8;
        }
        .up-down-list {
            i {
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 2px;
            }
            span {
                &.left {
                    display: inline-block;
                    width: 250px;
                }
            }
        }
    }

</style>
